import React,{PureComponent} from 'react';
import {connect} from 'react-redux';
import {Table, Input, Button, Icon,} from 'antd';
import Highlighter from 'react-highlight-words';

class ListContent extends PureComponent {

    state = {
        searchText:'',
    };



    getColumnSearchProps = (dataIndex) => ({
        filterDropdown: ({
                             setSelectedKeys, selectedKeys, confirm, clearFilters,
                         }) =>(

            <div style={{ padding: 8 }}>
                <Input
                    ref={node => { this.searchInput = node; }}
                    placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
                    style={{ width: 188, marginBottom: 8, display: 'block' }}
                />
                <Button
                    type="primary"
                    onClick={() => this.handleSearch(selectedKeys, confirm)}
                    icon="search"
                    size="small"
                    style={{ width: 90, marginRight: 8 }}
                >
                    Search
                </Button>
                <Button
                    ref='reset'
                    onClick={() => this.handleReset(clearFilters)}
                    size="small"
                    style={{ width: 90 }}
                >
                    Reset
                </Button>
            </div>
        ),
        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value, record) => record[dataIndex]?record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()):null,
        onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
                setTimeout(() => this.searchInput.select());
            }
        },
        render: (text) => (
            <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0  }}
                searchWords={[this.state.searchText]}
                autoEscape
                textToHighlight={text?text.toString():''}
            />
        ),
    });

    handleSearch = (selectedKeys, confirm) => {
        confirm();
        this.setState({ searchText: selectedKeys[0] });
    };

    handleReset = (clearFilters) => {
        clearFilters();
        this.setState({ searchText: '' });
    };




    render(){
        const data =this.props.News?this.props.News.toJS():[];

        const columns = [{
            title: '',
            dataIndex: 'title',
            key: 'title',
            width: '75%',
            ...this.getColumnSearchProps('title')
        },{
            title: '日期',
            dataIndex: 'creationTime',
            key: 'creationTime',
            width: '20%',
            ...this.getColumnSearchProps('creationTime')
        }
        ];


        return(
            <div >
                <Table  columns={columns} dataSource={data} rowKey='id' pagination={{  // 分页
                    showQuickJumper:true,goButton: 'ReactNode'}}
                        onRow={(record) => {
                             return {
                        onClick: (event) => {
                            //列表中的点击事件
                            const s=/\?\S*/.exec(this.props.checked);    //正则匹配？参数传到后面用来获取资源
                            const urlReg=/\S*#/.exec(window.location.href);//获取ip地址到/#
                 if (record.path!=null) 
                    switch (record.path) {
                        case '/HtmlPage':
                            window.open(urlReg+record.path+s+'&&id='+record.id);
                            break;
                        case '/ListPage':
                            break;
                        default:
                            window.open(record.path);
                            break
                    }
                }

                    };
                } }/>
            </div>
        )
    }
    componentWillReceiveProps(nextProps){
        this.setState({ searchText: ''});

    }
}

const mapState=(state)=>({
    News: state.getIn(['ListPage','News'])
});
const mapDispatch=(dispatch)=>({

});

export  default connect(mapState,mapDispatch)(ListContent);